import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { TabBar } from "weaver-mobile";
import { NavBar } from "weaver-mobile";
import Homepage from "../Homepage";
import Mine from "../Mine";
import "./index.less";

@withRouter
export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: "homepage",
    };
  }

  componentDidUpdate() {
    if (this.state.selectedTab == "homepage") {
      document.title = "首页";
    } else {
      document.title = "我的";
    }
  }

  render() {
    return (
      <div style={{ height: "100%", display: "flex", flexFlow: "column" }}>
        {/* <NavBar mode="dark" className="nav-bar">
          中田健身
        </NavBar> */}
        <TabBar
          barTintClassName={"bar-tint-color"}
          selectedClassName={"tint-color"}
          unSelectedClassName={"unselected-tint-color"}
        >
          <TabBar.Item
            title="主页"
            key="homepage"
            icon={<img src="/images/sy1.png" width="24" />}
            selectedIcon={<img src="/images/sy2.png" width="24" />}
            selected={this.state.selectedTab === "homepage"}
            onPress={() => {
              this.setState({
                selectedTab: "homepage",
              });
            }}
          >
            <Homepage />
          </TabBar.Item>
          <TabBar.Item
            title="我的"
            key="mine"
            icon={<img src="/images/wd1.png" width="24" />}
            selectedIcon={<img src="/images/wd2.png" width="24" />}
            selected={this.state.selectedTab === "mine"}
            onPress={() => {
              this.setState({
                selectedTab: "mine",
              });
            }}
          >
            <Mine />
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
